import ReactDOM from 'react-dom'

const age = 18

const obj = {
  name: 'ifer',
}
const arr = ['vue', 'react']

const test = () => 'Hello World'

// jsx
const pEle = <p>这个也给段落</p>

const h1Ele = (
  <div>
    <p>普通的简单数据类型：{age}</p>
    <p>对象中的属性：{obj.name}</p>
    {/* <p>对象虽然也是表达式，但是不能这样用：{obj}</p> */}
    <p>数组中的某一项：{arr[0]}</p>
    <p>甚至是整个数组：{arr}</p>
    <p>甚至是整个数组：{test()}</p>
    <div>JSX 本身也是表达式{pEle}</div>
  </div>
)

// 渲染谁、渲染到哪里
ReactDOM.render(h1Ele, document.querySelector('#root'))
